<template>
    <div id="centerDiv" class="centerDiv-container">
        <mars-map :url="configUrl" @onload="marsOnload" />

        <a-space style="position: absolute; top: 10px; left: 10px">
            <mars-button @click="back">返回</mars-button>
        </a-space>
    </div>
</template>

<script setup>
import * as mapWork from "./map.js";
import { onMounted, onBeforeUnmount, watch } from 'vue';

import MarsMap from "@mars/components/mars-work/mars-map.vue"
import { useRouter } from "vue-router"

const configUrl = `${process.env.BASE_URL}config/config.json`

const marsOnload = (map) => {
    mapWork.initMap(map)
}

const router = useRouter()
const back = () => {
    router.back()
}


// 结束-地图清理并且恢复
const commonMapWork_end = () => {
    mapWork.resetCommonMap()
}


// 页面结束移除添加到地球上的东西
onBeforeUnmount(() => {

    commonMapWork_end()
})
</script>
